<template>
	<view class="page-my">
		<uni-status-bar ></uni-status-bar>
		<view class="top">
			<!-- 用户信息 -->
			<view class="info" @tap="natigateToLogin()">
				<image :src="user_icon" mode="aspectFit" class="avatar" />
				<view class="name">
					<text class="login">{{username}}</text>
					<text class="title">{{signature}}</text>
				</view>
				<cl-icon name="arrow-right" color="#C9C9C9"></cl-icon>
			</view>

			<!-- 功能 -->
			<view class="features">
				<cl-row class="cl-row">
					<cl-col :span="6">
						<view class="item" @tap="toIdolsPage()">
							<view class="number">{{idolNum}}</view>
							<view class="text">关注数</view>
						</view>
					</cl-col>
					<cl-col :span="6">
						<view class="item" @tap="toFansPage()">
							<view class="number">{{fansNum}}</view>
							<view class="text">粉丝数</view>
						</view>
					</cl-col>
					<cl-col :span="6">
						<view class="item" @tap="toDetail()">
							<view class="number">{{articleNum}}</view>
							<view class="text">文章数</view>
						</view>
					</cl-col>
				</cl-row>
			</view>
		</view>

		<!-- 广告 -->
		<view class="ad">
			<image src="@/static/images/ad.png" mode="aspectFit" @tap="toVIP()"/>
		</view>

		<!-- list -->
		<view class="list">
			<view class="line"></view>
			
			<cl-list-item label="我的动态" @tap="toDetail()">
				<image slot="icon" src="@/static/images/message.png" alt />
				<view class="icon" slot="append">
					<cl-icon name="arrow-right"></cl-icon>
				</view>
			</cl-list-item>
			
			<cl-list-item label="成为VIP" @tap="toVIP()">
				<image slot="icon" src="@/static/images/favorites.png" alt />
				<view class="icon" slot="append">
					<cl-icon name="arrow-right"></cl-icon>
				</view>
			</cl-list-item>

			<cl-list-item label="我的关注" @tap="toIdolsPage()">
				<image slot="icon" src="@/static/images/attention.png" alt />
				<view class="icon" slot="append">
					<cl-icon name="arrow-right"></cl-icon>
				</view>
			</cl-list-item>

			<cl-list-item label="我的粉丝" @tap="toFansPage()">
				<image slot="icon" src="@/static/images/comment.png" alt />
				<view class="icon" slot="append">
					<cl-icon name="arrow-right"></cl-icon>
				</view>
			</cl-list-item>
			
			<cl-list-item label="分享" @tap="share()">
				<image slot="icon" src="@/static/images/records.png" alt />
				<view class="icon" slot="append">
					<cl-icon name="arrow-right"></cl-icon>
				</view>
			</cl-list-item>

			<cl-list-item label="我的收藏">
				<image slot="icon" src="@/static/images/favorites.png" alt />
				<view class="icon" slot="append">
					<cl-icon name="arrow-right"></cl-icon>
				</view>
			</cl-list-item>

			<cl-list-item label="浏览记录">
				<image slot="icon" src="@/static/images/records.png" alt />
				<view class="icon" slot="append">
					<cl-icon name="arrow-right"></cl-icon>
				</view>
			</cl-list-item>

			<view class="line"></view>

			<cl-list-item label="设置" @tap="navitageToSet()">
				<image slot="icon" src="@/static/images/set.png" alt />
				<view class="icon" slot="append">
					<cl-icon name="arrow-right"></cl-icon>
				</view>
			</cl-list-item>
		</view>
		
		<more-share ref="share"></more-share>
	</view>
</template>

<script>
import uniStatusBar from "../../components/uni-status-bar.vue";
import moreShare from '@/components/more-share.vue';

export default {
	components:{
		uniStatusBar,
		moreShare
	},
	data() {
		return {
			isLogin: true,
			fansNum: 0,
			idolNum: 0,
			articleNum: 0,
			username:"未登录",
			user_icon:"/static/images/avatar.png",
			signature:"点击登录有好礼",
		};
	},
	onShow(){
		this.isLogin = this.User.token == false ? false : true;
		if(this.isLogin){
			this.fansNum = this.User.userinfo.fans_num;
			this.idolNum = this.User.userinfo.idols_num;
			this.articleNum = this.User.userinfo.article_num;
			this.username = this.User.userinfo.username;
			this.user_icon = this.User.userinfo.user_icon;
			this.signature = this.User.userinfo.signature;
		}else{
			this.fansNum = 0;
			this.idolNum = 0;
			this.articleNum = 0;
			this.username = "未登录";
			this.user_icon = "/static/images/avatar.png";
			this.signature = "点击登录有好礼";
		}
	},
	onBackPress() {
		this.$refs.share.close();
	},
	methods:{
		share(){
			this.$refs.share.open();
		},
		natigateToLogin(){
			if(this.isLogin){
				uni.navigateTo({
					url:"/pages/userinfo-update/userinfo-update"
				})
			}else{
				uni.navigateTo({
					url:"/pages/login/index"
				})
			}
		},
		// 前往详情
		toDetail() {
			let uid = this.User.userinfo.id;
			uni.navigateTo({
				url: "/pages/detail/index?uid=" + uid,
			});
		},
		toVIP() {
			uni.navigateTo({
				url:'/pages/vip/vip'
			})
		},
		toIdolsPage() {
			uni.navigateTo({
				url: "/pages/friend-request/idols",
			});
		},
		toFansPage() {
			uni.navigateTo({
				url: "/pages/friend-request/fans",
			});
		},
		navitageToSet(){
			uni.navigateTo({
				url: "/pages/set/set",
			});
		}
	}
};
</script>

<style lang="scss">
.cl-row{
	display: flex;
	justify-content:center;
	.text{
		color:#BEBEBE;
		font-size: 30rpx;
	}
	.number{
		font-weight: bolder;
	}
}
page {
	background-color: #f7f7f7;
}
.page-my {
	padding-top: 40rpx;
	background-color: #ffffff;
	.top {
		width: calc(100% - 40rpx);
		margin: 0 20rpx 32rpx 20rpx;
		padding: 36rpx 32rpx 46rpx 32rpx;
		background-color: #ffffff;
		box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;
		box-sizing: border-box;
		//#ifdef MP-WEIXIN
		margin-top: 100rpx;
		//#endif
		.info {
			display: flex;
			align-items: center;
			margin-bottom: 56rpx;
			.avatar {
				width: 108rpx;
				height: 108rpx;
				margin-right: 22rpx;
				border-radius: 50%;
			}
			.name {
				flex: 1;
				.login {
					display: block;
					margin-bottom: 6rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #000000;
				}
				.title {
					font-size: 24rpx;
					font-weight: 400;
					color: #6f7587;
				}
			}
		}
		.features {
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					display: block;
					margin-bottom: 16rpx;
					max-width: 41rpx;
					max-height: 43rpx;
				}
				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #151515;
				}
			}
		}
	}
	.ad {
		width: 100%;
		margin-bottom: 18rpx;
		text-align: center;
		image {
			width: 686rpx;
			height: 127rpx;
		}
	}
	.list {
		.cl-list-item {
			padding: 0 20rpx;
			image {
				max-width: 37rpx;
				max-height: 35rpx;
			}
			.cl-icon {
				color: #e9e9e9;
			}
		}
		.line {
			width: 100%;
			height: 16rpx;
			background: #f7f7f7;
		}
	}
}
</style>
